<template>
	<view style="commodity_manage_box">
		<u-empty
			mode="data"
			icon="http://cdn.uviewui.com/uview/empty/data.png"
			text="暂无商品类别菜单,请先添加"
			v-show="typeEmptyShow"
		>
		</u-empty>
		<!-- 悬浮按钮 -->
		<uni-fab 
		ref="fab" 
		:pattern="pattern" 
		:content="content" 
		:horizontal="horizontal" 
		:vertical="vertical"
		:direction="direction" 
		@trigger="trigger" 
		@fabClick="fabClick" />
		<view class="left_commodity_type_box">
			<view class="type_item" v-for="item,index in commodityTypeList" :ref="`type_item${item.id}`" @click="clickTypeItem(item)">
				<text>{{item.typeName}}</text>
			</view>
		</view>
		<view class="commodity_list">
			<u-empty
				mode="data"
				icon="http://cdn.uviewui.com/uview/empty/data.png"
				text="暂无商品"
				v-show="commodityListEmptyShow"
			>
			</u-empty>
			<view class="commodity_item" v-for="item in commodityList">
				<image class="commodity_item_image" :src='`http://localhost:15000/fileManager/getImageById?id=` + item.imageId' mode=""></image>
				<view class="commodity_item_textbox">
					<p class="commodity_item_name">{{item.commodityName}}</p>
					<p class="commodity_item_remark">{{item.remark}}</p>
					<p class="commodity_item_amount">销售{{item.amount}}</p>
					<text class="commodity_item_price">
						￥{{item.price}}
					</text>
					<text class="commodity_item_priced">￥{{item.priced}}</text>
					<view class="commodity_item_btns">
						<u-button @click="editCommodity(item.id)" class="commodity_item_updateBtn" type="primary" :plain="true" text="修改"></u-button>
						<u-button @click="soldOutCommodity(item.id)" class="commodity_item_outBtn" type="error" :plain="true" text="下架"></u-button>
					</view>
				</view>
			</view>
		</view>
		<!-- 消息提示 -->
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				// 悬浮按钮 样式
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				// 悬浮按钮 水平对齐方式
				horizontal: 'left',
				// 悬浮按钮 垂直对齐方式
				vertical: 'bottom',
				// 悬浮按钮打开展示方式。horizontal:水平显示，vertical：垂直显示
				direction: 'horizontal',
				// 悬浮按钮 内容
				content: [{
						iconPath: '/static/image.png',
						selectedIconPath: '/static/image-active.png',
						text: '下架商品',
						active: false
					},
					{
						iconPath: '/static/home.png',
						selectedIconPath: '/static/home-active.png',
						text: '添加分类',
						active: false
					},
					{
						iconPath: '/static/star.png',
						selectedIconPath: '/static/star-active.png',
						text: '添加商品',
						active: false
					}
				],
				// 存放商品分类信息列表
				commodityTypeList: [],
				// 商品分类信息列表 空状态
				commodityTypeListEmptyShow: false,
				// 商品类别id
				commodityTypeId: '',
				// 存放 商品信息列表
				commodityList: [],
				// 商品信息列表 为空 展示
				commodityListEmptyShow: false,
				// 商品列表 空状态
				typeEmptyShow: false
			}
		},
		onBackPress() {
			if (this.$refs.fab.isShow) {
				this.$refs.fab.close()
				return true
			}
			return false
		},
		created () {
			// 初始化获取商品分类信息列表
			this.getCommodityTypeList()
		},
		watch: {
			commodityTypeId (newData) {
				this.$nextTick(() => {
					this.commodityTypeList.forEach(ele => {
						this.$refs['type_item' + ele.id][0].$el.style.backgroundColor = '#F2F2F2'
					})
					this.$refs['type_item' + newData][0].$el.style.backgroundColor = 'white'
					// 页面渲染完成过后 根据店铺id 以及 分类id获取商品信息列表
					this.getCommodityListByShopIdAndTypeId()
				})
			}
		},
		mounted () {
		},
		onPullDownRefresh () {
			// 初始化获取商品分类信息列表
			this.getCommodityTypeList()
		},
		methods: {
			// 下架商品
			soldOutCommodity (id) {
				this.$myRequest({
					url: '/commodity/soldOutCommodity',
					methods: 'get',
					data: {
						id: id
					}
				}).then(res => {
					if (res.data.flag) {
						this.uNotify('下架成功，如果查看需在左下方下下架管理中查看', 'success')
						// 刷新页面
						this.getCommodityListByShopIdAndTypeId()
					} else {
						this.uNotify('下架失败，请重试', 'warning')
					}
				})
			},
			// 根据id修改商品信息
			editCommodity (id) {
				uni.navigateTo({
					url: '/pages/commodity/commodity-edit?id=' + id
				})
			},
			// 根据店铺id获取商品信息列表
			getCommodityListByShopIdAndTypeId () {
				this.$myRequest({
					url: '/commodity/getCommodityListByShopIdAndTypeId',
					data: {
						shopId: uni.getStorageSync('shopId'),
						typeId: this.commodityTypeId
					},
				}).then(res => {
					this.commodityList = res.data.obj
					if (this.commodityList.length === 0) {
						this.commodityListEmptyShow = true
					} else {
						this.commodityListEmptyShow = false
					}
				})
			},
			// 点击 商品分类触发方法（修改样式，进行模糊查）
			clickTypeItem (item) {
				this.commodityTypeList.forEach(ele => {
					this.$refs['type_item' + ele.id][0].$el.style.backgroundColor = '#F2F2F2'
				})
				var re = 'type_item' + item.id
				this.$refs[re][0].$el.style.backgroundColor = 'white'
				this.commodityTypeId = item.id
			},
			// 根据店铺id获取当前 商品分类列表信息
			getCommodityTypeList () {
				this.$myRequest({
					url: '/commodityType/getCommodityTypeList',
					data: {
						shopId: uni.getStorageSync('shopId')
					}
				}).then(res => {
					if (res.data.flag) {
						uni.stopPullDownRefresh()
					}
					this.commodityTypeList = res.data.obj
					if (this.commodityTypeList.length === 0) {
						this.typeEmptyShow = true
					} else {
						this.commodityTypeId = this.commodityTypeList[0].id
					}
				})
			},
			trigger(e) {
				this.content[e.index].active = !e.item.active
				if (e.index === 2) {
					uni.navigateTo({
						url: '/pages/commodity/commodity-save'
					})
				} else if (e.index === 1) {
					uni.navigateTo({
						url: '/pages/commodity/commodity-type'
					})
				} else if (e.index === 0) {
					uni.navigateTo({
						url: '/pages/commodity/commodity-soldOut'
					})
				}
			},
			// 悬浮按钮点击
			fabClick() {
			},
			// 定义消息提醒方法
			uNotify(message, type) {
				this.$refs.uNotify.show({
					top: 40,
					type: type,
					message: message,
					duration: 1000 * 3,
					fontSize: 20,
					safeAreaInsetTop:true
				})
			},
		}
	}
</script>

<style scoped>
.warp {
	padding: 10px;
}

.button {
	margin-bottom: 10px;
}
.commodity_manage_box{
	width: 100%;
	overflow: hidden;
}
.left_commodity_type_box{
	width: 30%;
	height: 720px;
	overflow: hidden;
	overflow: scroll;
	float:left;
}
.type_item{
	width: 100%;
	height: 60px;
	line-height: 60px;
	background-color: #F2F2F2;
	text-align: center;
}
.commodity_list{
	width: 68%;
	height: 852px;
	overflow: hidden;
	overflow: scroll;
	float:left;
	margin-left: 2%;
}
.commodity_item{
	width: 100%;
	height: 120px;
	margin-top: 10px;
	position: relative;
}
.commodity_item_image{
	width: 100px;
	height: 100px;
	float:left;
}
.commodity_item_name{
	font-weight: bold;
}
.commodity_item_price{
	color: #FC503D;
	font-weight: bold;
}
.commodity_item_textbox{
	width: 62%;
	float:left;
	margin-left: 2%;
}
.commodity_item_remark{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
	color: #A2A0A1;
}C
.commodity_item_amount{
	color: #A2A0A1;
}
.commodity_item_priced{
	font-size: 12px;
	text-decoration:line-through
}
.commodity_item_btns{
	position: absolute;
	bottom: 0;
	right: 10px;
	float:right;
}
.commodity_item_updateBtn{
	width: 30%;
	float:right;
}
.commodity_item_outBtn{
	width: 30%;
	float:right;
	margin-right: 10px;
}
</style>
